import React, { useState } from "react";
/**
 * React.memo
 * 首先明确 React 组件的渲染条件：
    组件的 props 发生变化
    组件的 state 发生变化
    useContext 发生变化

    使用场景：
    当子组件接收的 props 不经常变化时
    当组件重新渲染的开销较大时
    当需要避免不必要的渲染时

    优点：
    通过记忆化避免不必要的重新渲染
    提高应用性能
    减少资源消耗

    注意事项：
    不要过度使用，只在确实需要优化的组件上使用
    对于简单的组件，使用 memo 的开销可能比重新渲染还大
    如果 props 经常变化， memo 的效果会大打折扣
 */
interface User {
  name: string;
  age: number;
  email: string;
}
interface CardProps {
  user: User;
}

const Card = React.memo(function ({ user }: CardProps) {
  console.log("react.memo==>Card render==》");
  const styles = {
    backgroundColor: "lightblue",
    padding: "20px",
    borderRadius: "10px",
    margin: "10px",
  };
  return (
    <div style={styles}>
      <h1>{user.name}</h1>
      <p>{user.age}</p>
      <p>{user.email}</p>
    </div>
  );
});
export function ReactMemoDemo() {
  const [users, setUsers] = useState<User>({
    name: "张三",
    age: 18,
    email: "zhangsan@example.com",
  });
  const [search, setSearch] = useState("");
  return (
    <div>
      <h1>React.memo测试</h1>
      <input
        placeholder="搜索不触发子组件更新"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <div>
        <button
          onClick={() =>
            setUsers({
              name: "李四",
              age: Math.random() * 100,
              email: "lisi@example.com",
            })
          }
        >
          更新user
        </button>
      </div>
      <Card user={users} />
    </div>
  );
}
